<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>功能调试测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    .test-section {
      border: 1px solid #ddd;
      padding: 15px;
      margin: 15px 0;
      border-radius: 8px;
    }
    .success {
      color: green;
      font-weight: bold;
    }
    .error {
      color: red;
      font-weight: bold;
    }
    button {
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>🔍 功能调试测试页面</h1>
  
  <div class="test-section">
    <h3>测试1：检查API对象</h3>
    <button onclick="testAPI()">测试 API</button>
    <div id="apiResult"></div>
  </div>
  
  <div class="test-section">
    <h3>测试2：检查登录状态</h3>
    <button onclick="testAuth()">测试登录状态</button>
    <div id="authResult"></div>
  </div>
  
  <div class="test-section">
    <h3>测试3：测试快捷项API</h3>
    <button onclick="testQuickItems()">测试快捷项API</button>
    <div id="quickItemsResult"></div>
  </div>
  
  <div class="test-section">
    <h3>测试4：测试预算API</h3>
    <button onclick="testBudgets()">测试预算API</button>
    <div id="budgetsResult"></div>
  </div>
  
  <div class="test-section">
    <h3>测试5：测试标签API</h3>
    <button onclick="testTags()">测试标签API</button>
    <div id="tagsResult"></div>
  </div>
  
  <div class="test-section">
    <h3>测试6：检查main.js函数</h3>
    <button onclick="testFunctions()">测试函数是否存在</button>
    <div id="functionsResult"></div>
  </div>

  <script src="./js/api.js"></script>
  <script>
    function testAPI() {
      const result = document.getElementById('apiResult');
      try {
        if (typeof api !== 'undefined') {
          result.innerHTML = '<span class="success">✅ API对象存在</span><br>';
          result.innerHTML += 'API方法: ' + Object.keys(api).join(', ');
        } else {
          result.innerHTML = '<span class="error">❌ API对象不存在</span>';
        }
      } catch (error) {
        result.innerHTML = '<span class="error">❌ 错误: ' + error.message + '</span>';
      }
    }

    function testAuth() {
      const result = document.getElementById('authResult');
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      
      if (token && username) {
        result.innerHTML = `<span class="success">✅ 已登录</span><br>用户: ${username}<br>Token: ${token.substring(0, 20)}...`;
      } else {
        result.innerHTML = '<span class="error">❌ 未登录</span>';
      }
    }

    async function testQuickItems() {
      const result = document.getElementById('quickItemsResult');
      try {
        if (!api.quickItems) {
          result.innerHTML = '<span class="error">❌ api.quickItems 不存在</span>';
          return;
        }
        
        result.innerHTML = '正在测试...';
        const response = await api.quickItems.list({ book_id: 1 });
        result.innerHTML = '<span class="success">✅ 快捷项API正常</span><br>响应: ' + JSON.stringify(response).substring(0, 100);
      } catch (error) {
        result.innerHTML = '<span class="error">❌ 错误: ' + error.message + '</span>';
      }
    }

    async function testBudgets() {
      const result = document.getElementById('budgetsResult');
      try {
        if (!api.budgets) {
          result.innerHTML = '<span class="error">❌ api.budgets 不存在</span>';
          return;
        }
        
        result.innerHTML = '正在测试...';
        const response = await api.budgets.list({ book_id: 1 });
        result.innerHTML = '<span class="success">✅ 预算API正常</span><br>响应: ' + JSON.stringify(response).substring(0, 100);
      } catch (error) {
        result.innerHTML = '<span class="error">❌ 错误: ' + error.message + '</span>';
      }
    }

    async function testTags() {
      const result = document.getElementById('tagsResult');
      try {
        if (!api.features || !api.features.getTags) {
          result.innerHTML = '<span class="error">❌ api.features.getTags 不存在</span>';
          return;
        }
        
        result.innerHTML = '正在测试...';
        const response = await api.features.getTags();
        result.innerHTML = '<span class="success">✅ 标签API正常</span><br>响应: ' + JSON.stringify(response).substring(0, 100);
      } catch (error) {
        result.innerHTML = '<span class="error">❌ 错误: ' + error.message + '</span>';
      }
    }

    function testFunctions() {
      const result = document.getElementById('functionsResult');
      const functions = [
        'showCreateQuickItemModal',
        'showCreateBudgetModal',
        'showCreateTagModal',
        'loadQuickItems',
        'loadBudgets',
        'loadTags'
      ];
      
      let html = '<h4>函数检查结果：</h4>';
      functions.forEach(func => {
        if (typeof window[func] === 'function') {
          html += `<span class="success">✅ ${func} 存在</span><br>`;
        } else {
          html += `<span class="error">❌ ${func} 不存在</span><br>`;
        }
      });
      
      result.innerHTML = html;
    }
  </script>
</body>
</html> 